<template>
	<view class="fl-s-s p-r-30">
		<text class="title">修改密码</text>
		<view class="w-1 fl-s-s">
			<view class="w-1 fl-s-s m-t-70">
				<input class="myinput w-1" type="number" maxlength="11" v-model="mobile" placeholder-style="color:#999999;" placeholder="请输入手机号" />
				<view class="w-1 fr-b-c m-t-40"
					style="height: 98rpx; border-bottom: 2rpx solid #E4E4E4;;">
					<input type="text" v-model="code" placeholder="请输入验证码" />
					<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange">
					</u-verification-code>
					<!-- <u-button @tap="getCode" hover-class="none" :custom-style="btnStyle">{{tips}}</u-button> -->
					<view class="v_send_btn fm-ali fr-c" @click="getCode">
						{{tips}}
					</view>
				</view>
				<input  password class="myinput w-1 m-t-60" type="text" v-model="password"  placeholder-style="color:#999999;" placeholder="请输入密码" />
			</view>
			<view class="sub-btn fr-c w-1" @click="subInfo">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				seconds: 120,
				btnStyle: {
					width: '168rpx',
					height: '70rpx',
					borderRadius: '12rpx',
					border: '2rpx solid #EA4A43',
					fontSize: '28rpx',
					fontFamily: 'Alibaba',
					color: '#EA4A43'
				},
				mobile:'',
				password:'',
				code:''
			}
		},
		methods: {
				codeChange(text) {
					this.tips = text;
				},
				getCode() {
					if(!this.mobile) return this.$u.toast('请输入手机号');
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						this.$get({
							url:'/appuser/getCode',
							data:{
								mobile:this.mobile
							}
						}).then(res=>{
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						})
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				},
				// 提交修改
			subInfo(){
				this.$post({
					url:'/appuser/forgetPassword',
					data:{
						mobile:this.mobile,
						code:this.code,
						password:this.password
					}
				}).then(res=>{
					uni.showToast({
						title:res.msg,
						mask:true
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				})
			}
		}
	}
</script>

<style scoped>
	.title{
		margin-top: 180rpx;
		font-size: 52rpx;
		font-family: Alibaba;
		color: #333333;
	}
	.myinput {
		height: 76rpx;
		border-bottom: 1rpx solid #E4E4E4;
		font-size: 34rpx;
		font-family: Alibaba;
		color: #999999;
	}
	
	.my-u-input{
		padding-left: 0!important;
		padding-right: 0!important;
		height: 76rpx;
		border-bottom: 1rpx solid #E4E4E4!important;
		border-radius: 0;
		font-size: 34rpx;
		font-family: Alibaba;
		color: #999999;
	}
	.sendbtn{
		width: 180rpx;
		height: 70rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
		border: 2rpx solid #EA4A43;
		font-size: 32rpx!important;
		color: #EA4A43!important;
		font-family: Alibaba;
		background: transparent;
	}
	
	.sub-btn{
		height: 100rpx;
		background: linear-gradient(246deg, #FA360A 0%, #FA8C0A 100%);
		box-shadow: 0rpx 6rpx 32rpx 2rpx rgba(250, 74, 20, 0.58);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi-Medium, Alibaba PuHuiTi;
		color: #FFFFFF;
		margin-top: 296rpx;
	}
	
	.v_send_btn{
		padding: 0 10rpx;
		height: 70rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
		border: 2rpx solid #EA4A43;
		font-size: 32rpx;
		color: #EA4A43;
	}
</style>
